<template>
  <div>
    <div class="title"><image src="/static/back.svg" class="back" mode="widthFix" /></div>
    <div class="author_top">
      <image src="/static/Ellipse.jpg" class="author_topimg" mode="widthFix" />
      <div class="author_topname"><span>我</span><i></i><p>房祖名</p><b>编辑资料</b></div>

    </div>

       <div class="search_nav">
      <span class="active">收藏</span>
      <span>已读</span>
      <span>消息<em>12</em></span>
    </div>

  <div class="mine_t">24 篇收藏</div>
      <div class="search">
        <div class="search_box">
          <div class="search_btop">
          <image src="/static/Rectangle.jpg" mode="widthFix" />
          <span>报道 | 人物志</span>
          </div>
          <div class="search_f">
            <span>这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题</span>
            <em>作者作者作者作者作者作者作者作者作者作者作者作者</em>
            <p>这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介</p>
          </div>
        </div>
        <div class="search_box">
          <div class="search_btop">
          <image src="/static/Rectangle.jpg" mode="widthFix" />
          <span>报道 | 人物志</span>
          </div>
          <div class="search_f">
            <span>这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题</span>
            <em>作者作者作者作者作者作者作者作者作者作者作者作者</em>
            <p>这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介</p>
          </div>
        </div>
        <div class="search_box">
          <div class="search_btop">
          <image src="/static/Rectangle.jpg" mode="widthFix" />
          <span>报道 | 人物志</span>
          </div>
          <div class="search_f">
            <span>这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题</span>
            <em>作者作者作者作者作者作者作者作者作者作者作者作者</em>
            <p>这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介</p>
          </div>
        </div>
        <div class="search_box">
          <div class="search_btop">
          <image src="/static/Rectangle.jpg" mode="widthFix" />
          <span>报道 | 人物志</span>
          </div>
          <div class="search_f">
            <span>这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题</span>
            <em>作者作者作者作者作者作者作者作者作者作者作者作者</em>
            <p>这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介</p>
          </div>
        </div>
        <div class="search_box">
          <div class="search_btop">
          <image src="/static/Rectangle.jpg" mode="widthFix" />
          <span>报道 | 人物志</span>
          </div>
          <div class="search_f">
            <span>这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题</span>
            <em>作者作者作者作者作者作者作者作者作者作者作者作者</em>
            <p>这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介</p>
          </div>
        </div>
        <div class="search_box">
          <div class="search_btop">
          <image src="/static/Rectangle.jpg" mode="widthFix" />
          <span>报道 | 人物志</span>
          </div>
          <div class="search_f">
            <span>这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题</span>
            <em>作者作者作者作者作者作者作者作者作者作者作者作者</em>
            <p>这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介</p>
          </div>
        </div>
      </div>

    <div class="message hide">
      <div class="message_box">
        <image src="/static/Rectangle 7.jpg" class="message_boximg" mode="widthFix" />
        <div class="message_boxr">
          <p>魏紫钰</p>
          <em>3小时前</em>
          <span>这里是文章评论这里是文章评论这里是文章评论这里是文章评论</span>
        </div>
      </div>

        <div class="message_box">
        <image src="/static/Rectangle 7.jpg" class="message_boximg" mode="widthFix" />
        <div class="message_boxr">
          <p>魏紫钰<i>作者回复</i></p>
          <em>3小时前</em>
          <span>这里是文章评论这里是文章评论这里是文章评论这里是文章评论</span>
        </div>
        <div class="message_boxf">@张紫菜：这里是文章评论这里是文章评论这里是文章评论这里是文章评论</div>
      </div>

      <div class="message_box">
        <image src="/static/Rectangle 7.jpg" class="message_boximg" mode="widthFix" />
        <div class="message_boxr">
          <p>魏紫钰</p>
          <em>3小时前</em>
          <span>这里是文章评论这里是文章评论这里是文章评论这里是文章评论</span>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  data () {
  },

  methods: {
  }
}
</script>

<style>
.title{ width: 100%;height: 44px;position:fixed;top:0px;left:0;background:#ffffff;z-index: 9;padding:20px 0 0;}
.back{display: block;margin: 10px 0 0 20px;width:24px;height: 24px;float: left;}
.logo{ width: 94px;height:auto; display: block; float:left;margin:10px 95px 0; }

.author_top{ width: 327px;height:auto; display: block; float:left;margin:134px 23px 8px; border:1px solid rgba(0, 0, 0, 0.15); border-top:6px solid #000000; font-size: 12px; }
.author_topimg{ width: 88px; height: 88px; border-radius: 88px; display: block; float:left; margin: -42px 119.5px 0; }
.author_topname{width: 100%;height:auto; display: block; float:left;margin:15px 0 8px;}
.author_topname span{width: 24px;height:auto; display: block; float:left;margin:10px 0 0 20px; font-size: 12px; line-height: 17px; color: rgba(0,0,0,.4);}
.author_topname i{width: 58px;height:1px; display: block; float:left;margin:20px 0 0 10px;  background: rgba(0,0,0,.1);}
.author_topname p{width: auto;height:auto; display: block; float:left;margin:0 0 20px 10px;; font-size: 30px; line-height: 43px; color: rgba(0,0,0,1);Font-Family: Source Han Serif}
.author_topname b{width: auto;height:auto; display: block; float:right;margin:15px 20px 0 0px; font-size: 12px; line-height: 17px; color: rgba(0,0,0,.4);}

.search_nav{width: 88%;height:48px; display: block; float:left;margin:5px 6% 0; }
.search_nav span{width:auto;height:22px; display: block; float:left;margin:14px 24px 0 0; line-height: 22px; font-size: 14px; font-weight: bold; color: #000000; border-bottom:#ffffff 2px solid;padding: 1px; position: relative; }
.search_nav span.active{ border-bottom-color: #F03838;}
.search_nav em{width:auto;height:14px; display: block; float:left; line-height:14px; font-size: 12px; color: #ffffff; background: #F03838; padding:0 2px; position: absolute;top:-5px; right: -8px; z-index: 99;border-radius: 14px;}
.search{ width: 88%;height:auto; display: block; float:left;margin:20px 6% 30px; }
.search_box{ width: 151px;height:251px; display: block; float:left;margin:0 20px 30px 0; }
.search div.search_box:nth-child(even){ margin-right: 0px;}
.search_btop{ width: 100%;height:151px; display: block; float:left; position:relative; }
.search_btop image{ width: 100%;height:151px; display: block; float:left; position: absolute; top: 0; left: 0; z-index: 1; }
.search_btop span{ width: auto;height:20px; display: block; float:left; position: absolute; bottom: 0; left: 0; z-index: 2; background: rgba(34,34,34,.9); font-size: 10px; padding: 0 5px; line-height: 20px;color:#ffffff;}
.search_f{ width: 100%;height:auto; display: block; float:left;margin: 12px 0 0;}
.search_f{ width: 100%;height:auto; display: block; float:left;margin: 12px 0 0;}
.search_f span,.search_f p,.search_f em{width:100%;height:auto; display: block; float:left;}
.search_f span{ font-size: 14px;line-height: 20px; color: #000000; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
.search_f em{ font-size: 12px; line-height: 17px; color:rgba(0,0,0,.4);  overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
.search_f p{ font-size: 12px; line-height: 17px; height: 50px; color:rgba(0,0,0,.4); font-family: PingFang SC; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}
.mine_t{width: 88%;height:auto; display: block; float:left;margin:10px 6% 0px;color:rgba(0,0,0,.4);  font-size: 14px;line-height: 20px; }
.message{width: 327px;height:auto; display: block; float:left;margin:0 23px ;}
.message_box{width: 100%;height:auto; display: block; float:left;margin:10px 0 20px;}
.message_boximg{ width: 42px; height: 42px; display: block; float: left; border-radius: 42px;}
.message_boxr{ width: 271px; height: auto; display: block; float: right;}
.message_boxr p{width: 100%;height:auto; display: block; float:left; font-size: 13px; line-height: 18px; color: rgba(0,0,0,.4);}
.message_boxr p i{width: auto;height:15px; padding: 0 3px; background: #222222; display:inline-block;  font-size: 10px; line-height: 15px; color: #FFFFFF; margin-left: 5px;}
.message_boxr em{width: 100%;height:auto; display: block; float:left; font-size: 10px; line-height: 14px; color: rgba(0,0,0,.4);}
.message_boxr span{width: 100%;height:auto; display: block; float:left; font-size: 15px; line-height: 22px; color: rgba(0,0,0,.65);margin: 5px 0 0;}
.message_boxf{padding: 12px; font-size: 12px; line-height: 18px;color: rgba(0,0,0,.4); border: 1px solid rgba(0,0,0,.1);width: 247px; height: auto;margin: 10px 0 0; display: block;float: right;}
.hide{display: none}
</style>